<script>
import { merge, omit } from "lodash";
import BaseForm from "../Form/form.vue";
export default {
  props: {
    headerOptions: {
      type: Object,
      default: () => ({
        title: null,
        columns: [],
        append: () => null,
        scopedSlots: {
          before: () => null,
          after: () => null,
        },
      }),
    },
  },
  computed: {
    title() {
      return this.$route?.query?.title
        ? this.$route.query.title
        : this.headerOptions.title;
    },
    formOptions() {
      if (!Array.isArray(this.headerOptions.columns)) return { columns: [] };
      const parentPageContext = this.$parent;
      const columns = this.headerOptions.columns
        .filter((set) => set && set.visiable !== false)
        .map((column) => {
          // 上下文对象，用外部页面的
          column.context = column.context || parentPageContext; // 保证弹窗内this指向统一外部页面
          if (column.comtype != "button") return column;
          column.onClick = column.onClick || (() => null);
          column.onClick = column.onClick.bind(column.context);
          return merge(
            {
              background: "#25bfc7",
              radius: "0.15",
              width: "auto",
              height: "1.56",
              perm: "",
            },
            column
          );
        });
      return {
        columns,
      };
    },
  },
  methods: {
    vif(bl) {
      return (node) => bl ? node : null
    }
  },
  render() {
    return (
      <div class="aone-page-header">
        <div class="aone-page-header-wrapper">
          <span class="aone-page-header_title">
            {this.title}
            {this.headerOptions.append}
          </span>
          <BaseForm
            ref="form"
            class="aone-page-header-container"
            formOptions={this.formOptions}
          />
        </div>
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.aone-page-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: #fff;
  border-top-right-radius: 0.26vw;
  border-top-left-radius: 0.26vw;
  padding: 8px 8px 8px 0;
  .aone-page-header_title {
    font-size: 14px;
    padding-left: 8px;
    border-left: 5px solid #13a3f9;
    color: #64748e;
  }
}
.aone-page-header-container {
  display: flex;
  align-items: center;
  /deep/ {
    .el-form-item {
      margin: 0 5px;
    }
  }
}
</style>
